import React, { FC, useEffect } from 'react'
import Mytitle from '../../../../components/Mytitle'
import {inject,observer} from 'mobx-react'
import {Table,Tag,Popconfirm,Button,Tooltip }from 'antd'
import {annoTypeList,roleList } from "./../../../../utils/index"
import moment from 'moment'  //时间过滤器

import {

  DeleteOutlined,
  CloseCircleOutlined,
  SearchOutlined
 
  
} from '@ant-design/icons';
import { ajax } from '../../../../api'
import { useNavigate } from 'react-router-dom'

 const List:FC<any>=({
   uinfo,
   anno
 })=> {
   const {userInfo}=uinfo
   const {annoList,getAnnoList,changeanno}=anno
   const navigate = useNavigate()

   useEffect(()=>{
    getAnnoList()
    console.log(annoList);
    
  },[])

  //点击确认删除
  const confirmDel=async(item:any)=>{
    let res = await ajax.annodelete({_id:item._id})
    if(res.code==200){
      //过滤掉被删除的数据
      var list = annoList.filter((v:any)=>v._id!=item._id);
      changeanno(list)
    }
  }
  //点击查看，携带——id进入详情页
  const gotoDetailed=(item:any)=>{
    navigate('/home/mine/anno/detailed/'+item._id)
  }
  const columns:any = [
    {
      title: '序号',
      dataIndex: '_v',
      render:(text:any,item:any,index:any)=>{
        return index+1
      },
      align:'center',
      width:'80px'
      
    },
    {
      title: '标题',
      dataIndex: 'title',
      width:'200px',
      ellipsis:true
    },
    {
      title: '内容',
      dataIndex: 'content',
      align:"left",
      width:'200px',
      ellipsis:true
    },
    {
      title: '发布时间',
      dataIndex: 'time',
      render(value:any,item:any,index:any){
        return <span > {moment(value).format("YYYY-MM-DD HH:mm")} </span>
      }
    },
    {
      title: '公告类型',
      align:"center",
      width:'100px',
      dataIndex: 'type',
      render(value:any,item:any,index:any){
        return (
          <Tag color={ annoTypeList.find(item=>item.value==value)?.color}>
          {annoTypeList.find(item=>item.value==value)?.label}
        </Tag>
        )
      }
    },
    {
      title:"发布人"  ,
      align:'center' ,
      
      dataIndex:"info",
      render(value:any,item:any,index:any){
        return <span> {value.username} </span>
      }
    },
    {
      title:"权限"  ,
      align:'center' ,
      width:"80px",
      dataIndex:"info",
      render(value:any,item:any,index:any){
        return (
          <Tag color={roleList.find(item=>item.value==value.role)?.color}>
            {roleList.find(item=>item.value==value.role)?.label}
          </Tag>
        )
      }
    },
    {
      title:"操作"  ,
      align:'center' ,
      width:"80px",
      render(value:any,item:any,index:any){
        return (
         <div>
           <Tooltip title="点击查看">
                <Button  onClick={()=>gotoDetailed(item)} size="small" shape="circle" icon={<SearchOutlined />} type="primary"></Button>
            </Tooltip>
           {
               <Popconfirm
                title="确定删除吗?"
                onConfirm={()=>confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Tooltip title="点击删除">
                  <Button type="primary"  shape="circle" danger icon={<CloseCircleOutlined />} size="small" />
                </Tooltip>
              </Popconfirm>
              }
         </div>
        )
      }
    },
  ];
  return (
    <div>
        <Mytitle text='公告展示'></Mytitle>
        <div>
        <Table dataSource={annoList} rowKey={record => record._id} columns={columns} pagination={{pageSize:5}} />
        </div>
    </div>
  )
}
export default inject('uinfo','anno')(observer(List))
